<html>
  <head>
    <meta charset="UTF-8"/>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
      <span v-html="msg"></span>
      <input v-model="message" />
      <div v-if="Math.random() > 0.5">
        Now you see {{msg}}
      </div>
      <div v-else>
        Now you don't see {{msg}}
      </div>

      <span v-if="loginType==='email'">Email</span>
      <span v-else>username</span>
      <button v-on:click="toggleLogin">toggle login</button>
      <input v-on:keyup.enter="submit" />
    </div>
    <script src="./assets/js/vue.js"></script>
    <script>
     var app = new Vue({
       el: "#app",
       data: {
         message: "Hello world!",
         msg: "<h1>test</h1>",
         loginType: "emai"
       },
       methods: {
         toggleLogin: function() {
           if (this.loginType === 'email')
              this.loginType = 'username'
              else 
              this.loginType = 'email'
         }
       },
       computed: {
         reversedMessage: function() {
           return this.message.split().reverse().join('')
         }
       }
     })
    </script>
  </body>
</html>
